<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: #fff;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="500"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // Style settings
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 1.5;

  // Helper function to draw an arrow
  function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
    const dx = tox - fromx;
    const dy = toy - fromy;
    const angle = Math.atan2(dy, dx);
    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
  }

  // Define coordinates and parameters based on the image
  const oPos = { x: 250, y: 100 };
  const m1Pivot = { x: 150, y: oPos.y };
  const m1BlockSize = { w: 40, h: 30 };
  const m1BlockPos = { x: m1Pivot.x - m1BlockSize.w / 2, y: m1Pivot.y - m1BlockSize.h };
  
  const m2Radius = 18;
  const theta = 28 * Math.PI / 180; // Angle in radians
  const totalLength = 250;

  // Calculate dependent positions
  const m2Pos = {
    x: m1Pivot.x + totalLength * Math.sin(theta),
    y: m1Pivot.y + totalLength * Math.cos(theta)
  };

  const cotTheta = 1 / Math.tan(theta);
  const cPosY = m1Pivot.y + (oPos.x - m1Pivot.x) * cotTheta;
  const cPos = { x: oPos.x, y: cPosY };

  // --- Start Drawing ---
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 1. Draw Axes
  ctx.beginPath();
  drawArrow(ctx, 50, oPos.y, 450, oPos.y); // x-axis
  drawArrow(ctx, oPos.x, oPos.y, oPos.x, 420); // y-axis
  ctx.stroke();

  // 2. Draw Labels for Axes
  ctx.font = 'italic 20px "Times New Roman"';
  ctx.fillText('O', oPos.x - 25, oPos.y - 5);
  ctx.fillText('x', 455, oPos.y + 7);
  ctx.fillText('y', oPos.x + 10, 425);

  // 3. Draw Block m1
  ctx.strokeRect(m1BlockPos.x, m1BlockPos.y, m1BlockSize.w, m1BlockSize.h);
  ctx.beginPath();
  ctx.arc(m1Pivot.x, m1Pivot.y, 4, 0, 2 * Math.PI);
  ctx.fill();
  
  // 4. Draw Mass m2
  ctx.beginPath();
  ctx.arc(m2Pos.x, m2Pos.y, m2Radius, 0, 2 * Math.PI);
  ctx.stroke();

  // 5. Draw the rod
  ctx.beginPath();
  ctx.moveTo(m1Pivot.x, m1Pivot.y);
  ctx.lineTo(m2Pos.x, m2Pos.y);
  ctx.stroke();

  // 6. Labels for masses (m1, m2)
  ctx.font = 'italic 22px "Times New Roman"';
  ctx.fillText('m', m1BlockPos.x, m1BlockPos.y - 15);
  ctx.font = 'italic 16px "Times New Roman"';
  ctx.fillText('1', m1BlockPos.x + 12, m1BlockPos.y - 10);
  
  ctx.font = 'italic 22px "Times New Roman"';
  ctx.fillText('m', m2Pos.x + m2Radius + 5, m2Pos.y + 5);
  ctx.font = 'italic 16px "Times New Roman"';
  ctx.fillText('2', m2Pos.x + m2Radius + 17, m2Pos.y + 10);

  // 7. Label C
  ctx.font = 'italic 20px "Times New Roman"';
  ctx.fillText('C', cPos.x - 25, cPos.y + 5);

  // 8. Draw angle theta
  ctx.beginPath();
  ctx.arc(cPos.x, cPos.y, 25, Math.PI / 2, Math.PI / 2 + theta, false);
  ctx.stroke();
  const thetaLabelPos = {
      x: cPos.x + 35 * Math.sin(theta / 2 + 0.05),
      y: cPos.y + 35 * Math.cos(theta / 2 + 0.05)
  };
  ctx.fillText('θ', thetaLabelPos.x, thetaLabelPos.y + 5);

  // 9. Draw labels for lengths (l1, l2)
  const l1Mid = { x: (m1Pivot.x + cPos.x) / 2, y: (m1Pivot.y + cPos.y) / 2 };
  const l2Mid = { x: (cPos.x + m2Pos.x) / 2, y: (cPos.y + m2Pos.y) / 2 };
  const labelOffset = -20;

  ctx.font = 'italic 20px "Times New Roman"';
  ctx.fillText('l', l1Mid.x + labelOffset, l1Mid.y);
  ctx.font = 'italic 14px "Times New Roman"';
  ctx.fillText('1', l1Mid.x + labelOffset + 8, l1Mid.y + 5);
  
  ctx.font = 'italic 20px "Times New Roman"';
  ctx.fillText('l', l2Mid.x + labelOffset, l2Mid.y);
  ctx.font = 'italic 14px "Times New Roman"';
  ctx.fillText('2', l2Mid.x + labelOffset + 8, l2Mid.y + 5);

  // 10. Draw caption
  ctx.font = '22px "SimSun"';
  ctx.fillStyle = 'black';
  ctx.textAlign = 'center';
  ctx.fillText('力图 7.11.1', canvas.width / 2, canvas.height - 30);

</script>
</body>
</html>